<template>
  <div>
    <h1>父组件</h1>
    <Son :info="info" :obj="obj" :msg="msg" @fun="fun" @foo="foo">
      <ul>
        <li>{{ info }}</li>
      </ul>
    </Son>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, reactive, ref } from 'vue';
import Son from "./components/Son.vue";

export default defineComponent({
  setup () {
    const info = ref("今天星期二");
    provide("info", info);
    const obj = reactive({
      name:"too",
      age:18,
    });
    function foo(){
      console.log(info);
      console.log("emit 第二个事件");
    };
    const msg = ref("小朋友要学代码，以后挣钱买糖吃");
    function fun(value: string){
      console.log("复习$emit自定义事件");
      console.log(info.value + value);
    };
    return {
      info,
      obj,
      foo,
      msg,
      fun,
    };
  },
  components:{
    Son,
  },
});
</script>

<style scoped>

</style>